<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
            <el-input class="marginRB10" v-model="listQuery.search" placeholder="请输入房间号" style="width:200px" clearable></el-input>
            <el-button class="marginRB10" type="primary" @click="searchList" icon="el-icon-search">搜索</el-button>
          </el-form>

        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="id" label="序号" > </el-table-column>
          <el-table-column prop="room_id" label="房间号" > </el-table-column>
          <el-table-column prop="room_name" label="房间名" > </el-table-column>
          <el-table-column prop="seal_time" label="封禁时间" > </el-table-column>
          <el-table-column prop="remark" label="封禁理由" > </el-table-column>

          <el-table-column min-width="100px" label="操作">
            <template slot-scope="scope">
              <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {deleteData,  listData,  } from '@/api/room/roomSeal'
  export default {
    data() {
      return {
        confirmBtn:false,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10,
          search:undefined,
        },
        menuList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        },
        rules: {
          name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
          price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
          renew: [{ required: true, message: '请输入续费', trigger: 'blur' }],
          rebate: [{ required: true, message: '请输入返利', trigger: 'blur' }],
          head_picture: [{ required: true, message: '请输入头像框图片', trigger: 'blur' }],
          moods: [{ required: true, message: '请输入进场人气加成', trigger: 'blur' }],
          ratio: [{ required: true, message: '请输入经验加速', trigger: 'blur' }],
          image: [{ required: true, message: '请输入爵位图片', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      searchList(){
        this.listQuery.page = 1
        this.getList()
      },
      getList() {
        this.listLoading = true
        let urlData = '?';
        if(this.listQuery.page){ urlData = urlData + `page=${this.listQuery.page}&`}
        if(this.listQuery.perPage){ urlData = urlData + `perPage=${this.listQuery.perPage}`}
        if(this.listQuery.search){ urlData = urlData + `&search=${this.listQuery.search}`}
        listData(urlData).then(response => {
          this.menuList = response.data.list
          this.total = response.data.meta.total;
          this.listLoading = false
          this.confirmBtn = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.id= row.id
        this.form.name= row.name
        this.form.price= row.price
        this.form.renew= row.renew
        this.form.rebate= row.rebate
        this.form.head_picture= row.head_picture
        this.form.moods= row.moods
        this.form.ratio= row.ratio
        this.form.image= row.image

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },
      handleDelete(row) {
        if(this.confirmBtn) return
        this.confirmBtn = true
        let data = {ids:row.id}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                type:'success',
                message: '操作成功',
                position: 'bottom-right',
                showClose: false,
                duration: 3000
            });
          }else {
            this.confirmBtn = false
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        }
      },
      exportExcel(){
        exportExcel().then(response => {
          if (response.code === 200) {

          }
        })
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
<style  scoped>
  [v-cloak] {
      display: none;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both
  }

  .box-card {
      width: 100%;
  }

  .demo-form-inline {
      float: right;
  }

  /deep/.el-card__header {
        padding-bottom: 0;
    }
</style>
